<template>
  <div class="codeManageHeadComponent" v-if="oItem">
    <div class="content">
      <div class="style1" v-if="oItem.main.style === 1">
        <div class="left">新增码</div>
        <div class="right">
          <button>
            <span :style="{backgroundColor: oItem.main.iconColor}"></span>
            <i class="iconfont icon-tianjia" :style="{color: oItem.main.iconColor}"></i>
          </button>
        </div>
      </div>
      <div class="style2" v-if="oItem.main.style === 2">
        <div class="left">新增码</div>
        <div class="right">
          <button>
            <span :style="{backgroundColor: oItem.main.iconColor}"></span>
            <i class="iconfont icon-tianjia" :style="{color: oItem.main.iconColor}"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "codeManageHeadComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.codeManageHeadComponent {
  display: flex;flex: 1;
  .content {
    display: flex;flex: 1;
    .style1 {
      display: flex;
      flex: 1;
      justify-content: space-between;
      padding: 15px;
      box-sizing: border-box;align-items: center;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
      .right{display: flex; justify-content: flex-end;
        button{width:30px;height:30px;position: relative;border:none;background-color:transparent;
          span{width:100%;height:100%;border-radius: 100%;opacity: 0.15;position: absolute;left:0;top: 0;z-index: 2;}
          i{position: absolute;left:50%;top: 50%;z-index: 3; transform: translate(-50%, -50%);font-size:16px; }
        }
      }
    }
    .style2 {
      display: flex;
      flex: 1;
      padding: 15px;
      box-sizing: border-box;border-radius: 0px;align-items: center;
      justify-content: space-between;background-color: #fff;
      box-shadow: 3px 3px 3px #eee,3px -3px 3px #eee;
      .right{display: flex; justify-content: flex-end;
        button{width:30px;height:30px;position: relative;border:none;background-color:transparent;
          span{width:100%;height:100%;border-radius: 100%;opacity: 0.15;position: absolute;left:0;top: 0;z-index: 2;}
          i{position: absolute;left:50%;top: 50%;z-index: 3; transform: translate(-50%, -50%);font-size:16px; }
        }
      }
    }
  }
}
</style>
